<!--
* @name: G2 关系图
* @author: DuanYiPeng
* @date: 2020-07-23
-->
<template>
    <div
        id="g2HierarchyNode"
        ref="g2HierarchyNode"
        :style="'width:'+width+';height: '+height"></div>
</template>
<script>
    import DataSet from '@antv/data-set';
    import { Chart } from '@antv/g2';
    export default {
        name: "g2Hierarchy",
        props: {
            width:{
                type:String,
                default:'100%'
            },
            height:{
                type:String,
                default:'100%'
            },
            treeData:{
                type:Object,
                default:() => {
                    return {}
                }
            }
        },
        data() {
            return {}
        },
        created() {
        },
        mounted() {
        },
        computed: {},
        methods: {
            initG2Hierarchy(){
                let g2HierarchyNode = this.$refs.g2HierarchyNode;
                let width = g2HierarchyNode.offsetWidth;
                let height = g2HierarchyNode.offsetHeight;
                const dv = new DataSet.View().source(this.treeData, {
                    type: 'hierarchy'
                });
                dv.transform({
                    type: 'hierarchy.cluster'
                });

                const chart = new Chart({
                    container: 'g2HierarchyNode',
                    autoFit: true,
                    width,
                    height,
                    padding: [40, 0, 40, 0],
                });
                chart.axis(false);
                chart.tooltip({
                    title:'name', // title显示字段
                });
                chart.legend(false);
                chart.coordinate('polar');
                chart.scale({
                    x: {
                        nice: true,
                        sync: true,
                    },
                    y: {
                        nice: true,
                        sync: true,
                    },
                });

                const edgeView = chart.createView();
                edgeView.data(dv.getAllLinks().map(link => ({
                    x: [link.source.x, link.target.x],
                    y: [link.source.y, link.target.y],
                    source: link.source.name,
                    target: link.target.id
                })));
                edgeView.edge()
                    .position('x*y')
                    .shape('smooth') // vhv
                    .color('grey')
                    .tooltip('source*target')
                    .style({
                        strokeOpacity: 0.5,
                    });

                const nodeView = chart.createView();
                nodeView.data(dv.getAllNodes().map(node => ({
                    hasChildren: !!(node.data.children && node.data.children.length),
                    name: node.data.name,
                    value: node.value,
                    depth: node.depth,
                    x: node.x,
                    y: node.y
                })));
                nodeView.point()
                    .position('x*y')
                    .color('hasChildren')
                    .label('name', {
                        offset: 5,
                        labelEmit: true,
                        style:  {
                            fill: '#fff',
                            fontSize: 12,
                        }
                    });

                chart.render();
            }
        },
    }
</script>
<style scoped lang='scss'>

</style>
